<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>消息</title>
	<style type="text/css">
		@import url("css/flexbox.css");
		*{
			margin: 0px;
			padding: 0px;
			list-style-type: none;
			font-family: "microsoft yahei";
		}
		body{
			background-color: #EFEFEF;
			padding-top: 2.8125rem;
			padding-bottom: 3.4375rem;
		}
		
		/* 头部 */
		.topic{
			height: 2.8125rem;/*45px*/
			background-color: crimson;
			color: white;
			position: fixed;
			top: 0rem;
			left: 0rem;
			width: 100%;
			z-index: 10;
			
		}
	
		/* 主体 */
		/* 消息公告 */
		.notice{
			background-color: #FFFFFF;/*背景颜色白色*/
		}
		/* 内容 */
		/*总框加上上下边距与背景色*/
		.item-list{
			padding: 0px 0.9375rem;/*15px*/
			background-color: white;
		}
		/*上边线*/
		.item-list>.item+.item{
			border-top: 1px solid lightgray;
		}
		/* 规定左边的盒子 */
		.item>.left>img{
			width: 2.5rem;/*32px*/
			height: 2.5rem;/*32px*/
			display: block;
			border-radius: 1.25rem;/*16px*/
		}
		/* 规定右边的盒子 */
		.item>.right{
			height:3.125rem;/*文字内容总高度50px*/
			/* background-color:blue; */
			flex: 1;/*拉伸填满行*/
		}
		/* 规定右边盒子里面的内容 */
		.user-info{
			float: left;
			margin-left: 0.625rem;/*图与字10px边距*/
		}
		.user-info>li:first-child{
			font-weight: bold;/*第一排字体加粗*/
			/* white-space: nowrap;*/
			overflow: hidden;/*文字超出隐藏*/
			/* text-overflow: ellipsis; */
		}
		.user-info>li:last-child{
			color: #808080;/*第二排字体颜色改变*/
			font-size: 0.75rem;/*12px*/
			overflow: hidden;
		}
		.user-info>li{
			height: 1.5625rem;/*25px*/
			line-height: 1.5625rem;
		}
		.time{
			color: #000000;
			font-weight: bold;
		}
		
		
		/* 底部 */
		.bottom-menu{
			height: 3.4375rem;
			border-top: 1px solid lightgray;
			background-color: #FCFCFC;
			position: fixed;
			width: 100%;
			bottom: 0rem;
			left: 0rem;
		}
		.bottom-menu>li>a{
		display: flex;
		flex-direction: column;
		font-size: 0.875rem;
		align-items: center;
		text-decoration: none;
		color: black;
		}
		.bottom-menu>li>a>img{
			width: 2rem;
			height: 2rem;
			display: block;
		}
	</style>
</head>
<body>
	<!-- topic：头部标题 -->
	<div class="topic flex-row justify-content-center align-items-center">
		智慧后勤
	</div>
	
	<!-- 主体 -->
	<!-- 新消息 公告：notice-->
	<div class="news notice">
			<ul class="item-list">
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center"><img src="img/jqrtx.png"/></div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>智能机器人</li>
							<li><span class="time">8-15 13:12</span> 热门问题Top5</li>
						</ul>
					</div>
				</li>
				<li class="item flex-row">
					<div class="left flex-row justify-content-center align-items-center"><img src="img/fdytx.jpg"/></div>
					<div class="right flex-row align-items-center">
						<ul class="user-info">
							<li>辅导员</li>
							<li><span class="time">15:20</span> 微哨打卡</li>
						</ul>
					</div>
				</li>
			</ul>
	</div>
	
	<!-- 底部 菜单：menu-->
	<ul class="bottom-menu flex-row justify-content-space-around align-items-center">
		<li>
			<a href="index.html">
			<img src="img/fuwu-0.png" >
			<spen>首页</spen>
			</a>
		</li>
		<li>
			<a href="information.html">
			<img src="img/xiaoxi-1.png" >
			<spen>消息</spen>
			</a>
		</li>
		<!-- <li>
			<a href="address-book.htlm">
			<img src="img/tongxunlu-0.png" >
			<spen>通讯录</spen>
			</a>
		</li> -->
		<li>
			<a href="me.html">
			<img src="img/wode-0.png" >
			<spen>我的</spen>
			</a>
		</li>
	</ul>
</body>
</html>